import React, { FC, useRef } from "react";

const UseRedDemo: FC = () => {
  /* const inputRef = useRef<HTMLInputElement>(null);

  function selectInput() {
    const inputElem = inputRef.current;
    if (inputElem) inputElem.select();
  }
  return (
    <div>
      <input ref={inputRef} type="text" defaultValue="hallo word" />
      <button onClick={selectInput}>选择</button>
    </div>
  );  */

  const nameRef = useRef("SerMs"); // 不是DOM节点了, 普通的JS变量

  function changeName() {
    // 修改Ref值,不会触发rerender 使用state可以修改同时也会触发组件的rerender
    nameRef.current = "SerMsCoding";
    console.log(nameRef.current);
  }
  return (
    <>
      <p> name: {nameRef.current}</p>
      <div>
        <button onClick={changeName}>change Name</button>
      </div>
    </>
  );
};

export default UseRedDemo;
